<template>
    <div class="test">
        <h2>文本展示：{{text}}</h2>
        <h2>响应式文本展示：{{text3}}</h2>
        <h2>对象属性brand显示：{{car.brand}}</h2>
        <h2>对象属性price显示：{{car.price}}</h2>
        <br>
        <h2>列表</h2>
        <ul>
            <li v-for="item in games" :key="item.id">{{item.name}}</li>
        </ul>
        <h2>显示名称{{ name }}</h2>
        <h2>显示年龄{{ age }}</h2>
        <button @click="showText2">展示文本2</button>
        <button @click="modifTest3">响应式数据修改</button>
        <button @click="updatePrice">修改对象属性</button>
        <button @click="totalmodify">整体对象修改</button>
        <button @click="updateName">修改名称</button>
        <button @click="updateAge">修改年龄</button>
        <br>
        输入1：<input type="text" v-model="input1"><br>
        输入2：<input type="text" v-model="input2"><br>
        全部输入：<span>{{ totalInput }}</span><br>
        <button @click="updateTotalInput">修改输入</button>
    </div>
</template>

<!-- <script lang="ts">
    export default {
        name: 'testComponent'
    }
</script> -->

<script lang="ts" setup name="testComponent">
    import { ref, toRefs } from 'vue'// 响应式变量
    import { reactive } from 'vue'// 响应式对象属性
    import { computed } from 'vue'// 计算属性
    let text = 'Hello, Vue 3!'
    let text2 = "文本展示"
    let text3 = ref('响应式数据')
    let car = reactive({
        brand: 'BMW',
        price: 100000
    })
    let games = reactive([
        {id: 1, name: 'game1'},
        {id: 2, name: 'game2'},
        {id: 3, name: 'game3'}
    ])
    let person = reactive({
        name: 'John',
        age: 30
    })
    let { name, age } = toRefs(person)
    let input1 = ref("retrdtyf")
    let input2 = ref("dftyhfy")
    let totalInput = computed({
        get() {
            return input1.value + "-" + input2.value
        },
        set(newValue: string) {
            const [newInput1, newInput2] = newValue.split('-')
            input1.value = newInput1
            input2.value = newInput2
        }
    })
    function updateTotalInput () {
        totalInput.value = "new-string"
    }
    function updateName () {
        name.value += '&'
    }
    function updateAge () {
        age.value += 1
    }
    function totalmodify () {
        // ref相较于reactive而言，ref可直接对象赋值
        Object.assign(car, {
        brand: 'ewrtyg',
        price: 1078000
    })
    }
    function showText2 () {
        alert(text2)
    }
    function modifTest3 () {
        text3.value = '修改后的响应式数据'
    }
    function updatePrice () {
        car.price += 20
    }
</script>

<style scoped>
.test {
    background-color: #f9f9f9; /* 背景颜色 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 8px; /* 圆角 */
    padding: 16px; /* 内边距 */
    text-align: center; /* 文本居中 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

h2 {
    color: #333; /* 字体颜色 */
    font-size: 1.5rem; /* 字体大小 */
    margin: 0; /* 去掉默认外边距 */
}
</style>